import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import peopleInfoFakeData from './peopleInfoFakeData';
import styles from './index.less';

// const data = [
//   {
//     name: '管理人员',
//     working: 12,
//     nonWorking: 18,
//   },
//   {
//     name: '电工',
//     working: 8,
//     nonWorking: 6,
//   },
//   {
//     name: '架子工',
//     working: 8,
//     nonWorking: 6,
//   },
// ];

const jobs = ['未知工种', '企业职员', '建筑工工人'];
const legendData = ['在岗', '未在岗'];

const option = {
  backgroundColor: 'transparent',
  color: ['#2FB0FF', '#5A4AFF'],
  title: {
    text: '工区人员信息',
    link: ' http://223.112.163.214:8100/',
    target: 'self',
    top: 0,
    left: '20',
    textStyle: {
      fontSize: 14,
      color: '#fff',
    },
  },
  grid: {
    top: '80',
    left: '36',
    bottom: '15',
    right: '45',
    // containLabel: true,
  },
  legend: {
    show: true,
    icon: 'stack',
    itemWidth: 8,
    itemHeight: 2,
    top: 40,
    left: 20,
    data: legendData,
    textStyle: {
      color: 'RGB(193,223,255)',
    },
  },
  yAxis: [
    {
      type: 'category',
      // data: data.map(e => e.name),
      axisTick: {
        lineStyle: {
          color: 'transparent',
        },
        alignWithLabel: true,
      },
      nameTextStyle: {
        color: '#fff',
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        verticalAlign: 'bottom',
        align: 'left',
        padding: [0, 0, 30, 0],
        textStyle: {
          color: 'white',
        },

        margin: 0,
      },
    },
  ],

  xAxis: [
    {
      show: false,
      type: 'value',
      axisLabel: {
        textStyle: {
          color: 'white',
        },
        formatter: '{value}',
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'RGB(47,68,114)',
        },
      },
      axisLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: legendData[0],
      type: 'bar',
      //silent: true,
      barWidth: '4',
      barGap: '400%',
      label: {
        show: true,
        position: 'right',
        textStyle: {
          color: 'rgba(255,255,255,0.7)',
        },
      },
      // data: data.map(e => e.working),
    },
    {
      name: legendData[1],
      type: 'bar',
      //silent: true,
      barWidth: '4',
      label: {
        show: true,
        position: 'right',
        textStyle: {
          color: 'rgba(255,255,255,0.7)',
        },
      },
      //barGap: '-100%', // Make series be overlap
      // data: data.map(e => e.nonWorking),
    },
  ],
};

const WorkingPpl = ({ workingPpl = [], curProj, dispatch }) => {
  const [curData, setCurData] = useState(option);
  const [height, setHeight] = useState(335);
  useEffect(() => {
    if (curProj) {
      dispatch({ type: 'kanban/getWorkingPplInfo' });
    }
  }, [curProj]);
  useEffect(() => {
    if (!workingPpl.length) return;
    let newOption = JSON.parse(JSON.stringify(option));
    // todo 换回真数据
    // const [nameArr, workingNumArr, nonWorkingNumArr] = getData(workingPpl);
    const [nameArr, workingNumArr, nonWorkingNumArr] = peopleInfoFakeData;
    let _height = 335;
    if (nameArr.length * 110 > 335) {
      _height = nameArr.length * 100;
    }
    setHeight(_height);
    newOption.yAxis[0].data = nameArr;
    newOption.series[0].data = workingNumArr;
    newOption.series[1].data = nonWorkingNumArr;
    setCurData(newOption);
  }, [workingPpl]);
  return (
    <div className="border-box" style={{ marginTop: 24 }}>
      <EchartsWrap
        option={curData}
        opts={{ height: height, width: 380 }}
        style={{ height: 'auto' }}
        style={{ height: 'auto', minHeight: 335 }}
        // className={styles.overflowY}
      ></EchartsWrap>
    </div>
  );
};

function getData(workingPpl) {
  let dataTable = {};
  workingPpl.forEach(({ exitTime, workerInfo }) => {
    const { workerType } = workerInfo;
    if (!dataTable[workerType]) {
      dataTable[workerType] = {
        name: jobs[+workerType],
        working: 0,
        nonWorking: 0,
      };
    }
    dataTable[workerType][exitTime ? 'nonWorking' : 'working'] += 1;
  });
  console.log(dataTable);
  return Object.keys(dataTable).reduce(
    (r, key) => {
      const { name, working, nonWorking } = dataTable[key];
      r[0].push(name);
      r[1].push(working);
      r[2].push(nonWorking);
      return r;
    },
    [[], [], []],
  );
}

// export default WorkingStatus
export default connect(({ kanban, app }) => {
  return { workingPpl: kanban.workingPpl, curProj: app.curProj };
})(WorkingPpl);
